/**
 * 菜单
 */
import React from 'react'
import { CaretRightOutlined, CaretDownOutlined, MenuOutlined} from '@ant-design/icons';
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'

import LogoImg from '@assets/logo.png'
import './index.less'

export default class CustomHeader extends React.Component {
    static defaultProps = {
        navData: []
    }
    static propType = {
        navData: PropTypes.array
    }
    constructor(props) {
        super(props)

        this.state = ({
            mobileMenuVisible: false,
            currentMobileMenu1_2: ''
        })
    }

    componentDidMount() { }

    mobileMenuVisible = () => {
        this.setState({mobileMenuVisible: !this.state.mobileMenuVisible, currentMobileMenu1_2: ''})
    }

    render() {
        let { navData } = this.props
        let { mobileMenuVisible, currentMobileMenu1_2 } = this.state
        return (
            <div id="custom-header">
                <div className="device-mobile">
                    <div style={{display: 'flex', alignItems: 'center'}}>
                        <div className="mobile-icon">
                            <MenuOutlined className='icon' style={{fontSize: '30px', color: '#fff'}}
                                onClick={this.mobileMenuVisible}
                            />
                        </div>
                        <div className="logo-panel">
                            <Link to="/home"><img src={LogoImg} style={{height: '44px'}}/></Link>
                        </div>
                    </div>
                    <div className="mobile-menu-panel" style={{display: `${mobileMenuVisible ? 'block' : 'none'}`}}>
                        <ul>
                        {
                            !!navData && navData.map((item1, index1) => (
                                <li key = {item1.path} className="menu-1">
                                    {
                                        item1.name == '特色中心'
                                        ? <span onClick={()=>{
                                            this.setState({ currentMobileMenu1_2: index1 })
                                        }}>特色中心{currentMobileMenu1_2 == index1 ? <CaretRightOutlined/> : <CaretDownOutlined/>}</span>
                                        : <Link to={item1.path}
                                            onClick={()=>{
                                                if (!item1.children) {
                                                    this.mobileMenuVisible()
                                                }else {
                                                    this.setState({ currentMobileMenu1_2: index1 })
                                                }
                                            }}
                                        >{item1.name}{!!item1.children
                                                    ? currentMobileMenu1_2 == index1 ? <CaretRightOutlined/> : <CaretDownOutlined/>
                                                    : ''}</Link>
                                    }
                                    <ul className="menu-1-panel" style={{display: currentMobileMenu1_2 == index1 ? 'block' : 'none'}}>
                                    {
                                        !!item1.children && item1.children.map((item1_1, index1_1) => (
                                            item1.name == '特色中心'
                                            ? <a key={item1_1.key} href={item1_1.key} style={{display: 'block', lineHeight: '40px'}}>{item1_1.title}</a>
                                            : <li key={item1_1.key} className="menu-1-2"
                                                    onClick={()=>this.mobileMenuVisible()}
                                            >
                                                <Link to={item1_1.key}>
                                                    {item1_1.title}
                                                </Link>
                                            </li>
                                        ))
                                    }
                                    </ul>
                                </li>
                            ))
                        }
                        </ul>
                    </div>
                </div>
                <div className="device-pc" style={{alignItems: 'center'}}>
                    <Link to="/home"><img src={LogoImg} style={{height: '50px'}}/></Link>
                    <ul className="menu-panel">
                    {
                        !!navData && navData.map((item1, index1) => (
                            <li key = {item1.path}  className="menu-1">
                                {
                                    item1.name == '特色中心'
                                    ? <span>特色中心<CaretDownOutlined/></span>
                                    : <Link to={item1.path}>{item1.name}{!!item1.children && <CaretDownOutlined/>}</Link>
                                }
                                <ul className="menu-1-panel">
                                {
                                    !!item1.children && item1.children.map((item1_1, index1_1) => (
                                        item1.name == '特色中心'
                                        ? <a key={item1_1.key} href={item1_1.key} style={{display: 'block', lineHeight: '40px'}}>{item1_1.title}</a>
                                        : <li key={item1_1.key} className="menu-1-2">
                                            <Link to={item1_1.key}>
                                                {item1_1.title}
                                            </Link>
                                        </li>
                                    ))
                                }
                                </ul>
                            </li>
                        ))
                    }
                    </ul>
                </div>
            </div>
        );
    }
}
